<template>
	<view class="box">
		<view class="bg" :style="{background:'url('+ $BASE_URL +picList[0]  +')',backgroundSize:'100%'}">
			<view class="header">
				<view class="cardbox">
					<view class="card" v-for="(item,index) in 4" :key="index"
						:style="{background:'url('+ $BASE_URL +picList[1]  +')',backgroundSize:'100%'}">
						<view class=""
							style="font-size: 48rpx;color: #fff1d9;width: 196rpx;text-align: center;margin-top: 20rpx;">
							500元
						</view>
						<view class="" style="font-size: 18rpx;color: #fcdda6;width: 196rpx;text-align: center;">
							满6799可用
						</view>
					</view>


				</view>


				<view class="collection"
					:style="{background:'url('+ $BASE_URL +picList[2]  +')',backgroundSize:'100%'}">

				</view>





			</view>


			<view class="goodslist">
				<view class="good">
					<view class="good_left">

					</view>
					<view class="good_right">
						<view class="row1" style="font-size: 30rpx;font-weight: 700;">
							iPhone 14 Pro max
						</view>

						<view class="row2" style="font-size: 22rpx;color: #fa6e3e;margin: 30rpx 0 20rpx 0;">
							4800万像素主摄丨 a16强势驱动
						</view>
						<view class="row3" style="font-size: 22rpx;margin-bottom: 20rpx;">
							新用户专享 丨 信用免押 丨 顺丰包邮
						</view>
						<view class="row4" style="position: relative;">
							<view class="" style="position: absolute;top: 0;left: 0;z-index: 99;">
								<view class=""
									style="font-size: 20rpx;color: #fd465b;margin-top: 4rpx;margin-left: 10rpx;">
									券后价
								</view>
								<view class=""
									style="font-size: 26rpx;color: #fff;margin-top: 15rpx;margin-left: 10rpx;">
									券后价 ￥20/天
								</view>
							</view>
							<image :src="$BASE_URL +picList[3] " mode="aspectFill" style="width:355rpx;height:86rpx;">
							</image>
						</view>
					</view>
				</view>
			</view>
		<view class="" style="margin-top: 70rpx;display: flex;justify-content: center;margin-bottom: 30rpx;">
				<image :src="$BASE_URL +picList[4] " mode="aspectFill" style="width: 680rpx;height:134rpx;"></image>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				picList: []
			}
		},
		mounted() {
			this.$http('common.getPic', {}).then(res => {
				if (res.code === 1) {
					this.picList = res.data.result.activethree
				}
			});
		},
		methods: {
			// activethree
		}
	}
</script>

<style scoped lang="scss">
	.box {
		min-height: 100vh;

		.bg {
			width: 100%;
			min-height: 100vh;
			background-size: cover !important;
			background-repeat: no-repeat;
			padding-top: 100rpx;
			padding-bottom: 30rpx;

			.goodslist {
				margin-top: 500rpx;

				.good {
					margin: 0 auto;
					width: 710rpx;
					height: 318rpx;
					border-radius: 20rpx;
					background-color: #fff;

					display: flex;
					justify-content: space-between;
					box-sizing: border-box;
					padding: 25rpx;

					.good_left {
						width: 260rpx;
						height: 260rpx;
						border-radius: 20rpx;
						background-color: antiquewhite;
						overflow: hidden;
					}

					.good_right {
						width: 370rpx;
						height: 260rpx;
						// background-color: cadetblue;
					}
				}
			}

			.header {
				width: 700rpx;
				height: 538rpx;
				background-color: beige;
				position: relative;
				top: 220rpx;
				left: 50%;
				transform: translateX(-50%);
				padding: 35rpx 13rpx;
				box-sizing: border-box;

				.cardbox {
					// width: 700rpx;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;

					.card {
						width: 334rpx;
						height: 112rpx;
						background-color: aqua;
						margin-bottom: 30rpx;
					}
				}

				.collection {
					width: 676rpx;
					height: 164rpx;
				}
			}
		}
	}
</style>
